<!--
 * @Author: linzq
 * @Date: 2020-11-25 14:32:29
 * @LastEditors: linzq
 * @LastEditTime: 2021-11-24 16:40:53
 * @Description: 
-->
<template>
  <div class="position">
    <div class="loginChange">
      <el-select class="select" v-model="value" placeholder="请选择" size="mini" :popper-append-to-body="false">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
    </div>
    <div class="position" v-if="value === 'loginWidget'">
      <div class="position" style="z-index: 10;">
        <loginWidget :color="videoCanPlay ? ' #000' : '#eee'" />
      </div>
      <video
        src="../../assets/mp4/background.mp4"
        muted="muted"
        @canplay="canplay"
        autoplay="autoplay"
        loop="loop"
        style="width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;"
      />
      <!-- TODO: 初始进入页面会显示星空图，待优化 -->
      <div class="poster" v-if="!videoCanPlay">
        <img src="../../assets/img/sky.jpg" alt="星空" />
      </div>
    </div>
    <div v-else>
      <threeJs />
    </div>
  </div>
</template>

<script>
import loginWidget from './components/loginWidget'
import threeJs from './components/threeJs'
export default {
  name: 'login',
  components: { loginWidget, threeJs },
  data() {
    return {
      videoCanPlay: false,
      options: [
        { value: 'loginWidget', label: '动画背景版' },
        { value: 'threeJs', label: '3D效果版' }
      ],
      value: 'threeJs'
    }
  },
  mounted() {
    sessionStorage.removeItem('userInfo')
    sessionStorage.removeItem('menuList')
  },
  methods: {
    canplay() {
      this.videoCanPlay = true
    }
  }
}
</script>

<style lang="less" scoped>
.position {
  height: 100%;
  width: 100%;
  position: relative;
}
.poster img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
// 修改下拉选择器样式
.loginChange {
  position: fixed;
  z-index: 9999;
  top: 10px;
  right: 10px;
  .select {
    width: 150px;
    /deep/ .el-select-dropdown {
      background-color: transparent;
      color: #fff;
    }
    /deep/ .el-select-dropdown__list {
      background: none;
      color: #fff;
    }

    /deep/ .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
    }
    /deep/ .el-input__inner {
      background: none;
      outline: 0;
      border: 0;
    }
  }
}
</style>
